<template>
  <div class="boxActivity">
    <div>
      <p><router-link :to="{name:'Administration'}"><span><</span></router-link>活动专区<img src="../assets/小图标/搜索.png"></p>
    </div>
    <mt-navbar v-model="selected" fixed style="margin-top: 1.2rem">
      <mt-tab-item id="1">官方</mt-tab-item>
      <mt-tab-item id="2">其他</mt-tab-item>
    </mt-navbar>
    <mt-tab-container v-model="selected" style="margin-top: 2rem">
      <mt-tab-container-item id="1">
        <div class="boxPs">
          <img src="../assets/轮播/1.jpeg">
          <p>安装送豪礼
            <span><i class="fa fa-clock-o"></i>
            距离结束剩<span style="color: #f56707;padding: .1rem">{{sky}}</span>天</span>
          </p>
          <span>进行中</span>
        </div>
        <div class="boxPs">
          <img src="../assets/轮播/2.jpeg">
          <p>安装送豪礼
            <span><i class="fa fa-clock-o"></i>
            距离结束剩<span style="color: #f56707;padding: .1rem">{{skyo}}</span>天</span>
          </p>
          <span>进行中</span>
        </div>
        <div class="boxPs">
          <img src="../assets/轮播/3.jpeg">
          <p>安装送豪礼
            <span><i class="fa fa-clock-o"></i>
            距离结束剩<span style="color: #f56707;padding: .1rem">{{hour}}</span>天</span>
          </p>
          <span>进行中</span>
        </div>
        <div class="boxPs">
          <img src="../assets/轮播/4.jpeg">
          <p>安装送豪礼
            <span><i class="fa fa-clock-o"></i>
            距离结束剩<span style="color: #f56707;padding: .1rem">{{skyo}}</span>天</span>
          </p>
          <span>进行中</span>
        </div>
        <div class="boxPs">
          <img src="../assets/轮播/3.jpeg">
          <p>安装送豪礼
            <span><i class="fa fa-clock-o"></i>
            距离结束剩<span style="color: #f56707;padding: .1rem">{{skyso}}</span>天</span>
          </p>
          <span>已结束</span>
        </div>
      </mt-tab-container-item>
      <mt-tab-container-item id="2">
        <div class="boxPs">
          <img src="../assets/轮播/7.jpeg">
          <p>安装送豪礼
            <span><i class="fa fa-clock-o"></i>
            距离结束剩<span style="color: #f56707;padding: .1rem">{{hour}}:{{min}}</span></span>
          </p>
          <span>进行中</span>
        </div>
        <div class="boxPs">
          <img src="../assets/轮播/6.jpeg">
          <p>安装送豪礼
            <span><i class="fa fa-clock-o"></i>
            距离结束剩<span style="color: #f56707;padding: .1rem">{{hour}}:{{min}}</span></span>
          </p>
          <span>进行中</span>
        </div>
        <div class="boxPs">
          <img src="../assets/轮播/5.jpeg">
          <p>安装送豪礼
            <span><i class="fa fa-clock-o"></i>
            距离结束剩<span style="color: #f56707;padding: .1rem">{{hour}}:{{min}}</span></span>
          </p>
          <span>进行中</span>
        </div>
        <div class="boxPs">
          <img src="../assets/轮播/4.jpeg">
          <p>安装送豪礼
            <span><i class="fa fa-clock-o"></i>
            距离结束剩<span style="color: #f56707;padding: .1rem">{{hour}}:{{min}}</span></span>
          </p>
          <span>进行中</span>
        </div>
        <div class="boxPs">
          <img src="../assets/轮播/3.jpeg">
          <p>安装送豪礼
            <span><i class="fa fa-clock-o"></i>
            距离结束剩<span style="color: #f56707;padding: .1rem">{{skyso}}</span>天</span>
          </p>
          <span>已结束</span>
        </div>
      </mt-tab-container-item>
    </mt-tab-container>
  </div>
</template>

<script>
    export default {
        name: "Activity",
      data(){
          return{
            selected:"1",
            sky:0,
            skyo:0,
            skyso:0,
            hour:0,
            min:0,
            sec:0
          }
      },
      methods:{
        countdown () {
          const end = Date.parse(new Date('2020-07-08'));
          const now = Date.parse(new Date());
          const msec = end - now;
          let sky = parseInt(msec / 1000 / 60 / 60 / 24);
          let hour = parseInt(msec / 1000 / 60 / 60 % 24);
          let min = parseInt(msec / 1000 / 60 % 60);
          let sec = parseInt(msec / 1000 % 60);
          this.sky = sky;
          this.hour = hour > 9 ? hour : '0' + hour;
          this.min = min > 9 ? min : '0' + min;
          this.sec = sec > 9 ? sec : '0' + sec;

          const endo = Date.parse(new Date('2020-11-08'));
          const nowo = Date.parse(new Date());
          const mseco = endo - nowo;
          let skyo = parseInt(mseco / 1000 / 60 / 60 / 24);
          this.skyo = skyo;
          const othis = this;
          setTimeout(function () {
            othis.countdown()
          }, 1000)
        }
      },
      mounted() {
          this.countdown()
      }
    }
</script>

<style scoped>
  .boxActivity{font-size: .5rem;position: relative;}
  .boxActivity>div>P{
    position: fixed;
    top: 0;
    width: 100%;
    line-height: 1.2rem;
    z-index: 100;
    background: #edebeb;
  }
  .boxActivity>div a>span{
    padding-left: .4rem;
    padding-right: .4rem;
    color: #333333;
  }
  .boxActivity>div img{
    width: .5rem;
    height: .5rem;
    vertical-align: middle;
  }
  .boxActivity>div img:nth-child(2){
    padding: 0 .8rem 0 5.5rem;
  }
  .boxActivity .boxPs{
    width: 100%;
    margin-top: .1rem;
  }
  .boxActivity .boxPs>img{
    width: 100%;
    height: 4rem;
  }
  .boxActivity .boxPs>p{
    width: 100%;
    padding: .1rem .1rem;
  }
  .boxActivity .boxPs>p i{
    font-size: .6rem;
    vertical-align: middle;
    padding-right: .1rem;
  }
  .boxActivity .boxPs>p>span{
    font-size: .4rem;
    display: block;
    margin-top: .3rem;
  }
  .boxActivity .boxPs>span{
    float: right;
    margin-top: -1.1rem;
    margin-right: .2rem;
    background: #edebeb;
    color: #0000FF;
    padding: .1rem .3rem;
    border-radius: 50px;
    font-size: .35rem;
  }
</style>
